const hr = document.querySelector('.hr');
const min = document.querySelector('.mn');
const sec = document.querySelector('.sc');
const p = document.querySelectorAll('.clock p');

for(let i = p.length;i>0;i--){
    p[12-i].style.transform = i%3 === 0?
       `rotate(${(12-i) * 30}deg) translateX(125px) rotate(${(i-12) * 30}deg) `
        : `rotate(${(12-i) * 30}deg) translateX(125px)`;
}

function run(){
    let date = new Date();
    let h = date.getHours();
    let m = date.getMinutes();
    let s = date.getSeconds();
    hr.style.transform = `rotate(${h*30+m*0.5}deg)`;
    min.style.transform = `rotate(${m*6+s*0.1}deg)`;
    sec.style.transform = `rotate(${s*6}deg)`;
}
run();
setInterval(run,1000);